<template>
	<view class="post-island-detail">
		<view class="top-background" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }">

		</view>

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="home" size="30"
					:color="islandInfo.theme">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" @click="toSearchIslandPost" type="search" size="30"
						:color="islandInfo.theme">
					</uni-icons>
					<uni-icons style="margin-right: 40rpx;" @click="toShareIsland" type="bars" size="30"
						:color="islandInfo.theme">
					</uni-icons>
				</view>
			</view>

			<view class="info-top">
				<view class="cover">
					<image mode="aspectFill" :src="islandInfo.background"></image>
				</view>
				<view class="info-top-right" :style="{'color': islandInfo.theme }">
					<view class="name">
						{{islandInfo.name}}
					</view>
					<view class="description">
						{{islandInfo.description}}
					</view>
				</view>
			</view>

			<view
				style="width: 670rpx;margin-left: 40rpx;margin-top:30rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;font-size: 30rpx;">

				<div class="avatar-list-stacked">
					<span v-for="avatar in islandInfo.threeUserAvatar" class="avatar"
						:style="'background-image: url('+avatar+');'"
						style="background-repeat:no-repeat;background-size: cover; background-position:0px 0px;  "></span>
				</div>
				<view style="display: flex;flex-direction: row;align-items: center;" @click="toIslandIntro">
					<view :style="{'color': islandInfo.theme }">已有<span
							style="font-weight: bold;margin: 0 5rpx;">{{islandInfo.userCount}}</span>名hular加入</view>
					<uni-icons style="margin-left: 20rpx;height: 60rpx;line-height: 60rpx;" type="right" size="20"
						:color="islandInfo.theme">
					</uni-icons>
				</view>
			</view>

			<view class="main-content" style="min-height: 1200rpx;">
				<view class="activities">
					<view class="activity">
						<view class="activity-top" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }">
							<view class="activity-title" :style="{'color': islandInfo.theme }">
								篝火：第一次全体大会
							</view>
						</view>
						<view class="activity-bottom" :style="{'color': hexToRgba(islandInfo.theme,0.6) }">
							<view class="text-line-2">
								描述：关于隐私信息的说明和提醒私信息的说明这个星球目前是目星球目前
							</view>
							<view>日期：12-12 12:00</view>
						</view>
					</view>
					<view class="activity">
						<view class="activity-top" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }">
							<view class="activity-title" :style="{'color': islandInfo.theme }">
								篝火：第二次全体大会
							</view>
						</view>
						<view class="activity-bottom" :style="{'color': hexToRgba(islandInfo.theme,0.6) }">
							<view class="text-line-2">
								描述：关于隐私信息的说明和提醒私信息的说明这个星球目前是目星球目前
							</view>
							<view>日期：12-12 12:00</view>
						</view>
					</view>
					<view class="activity">

					</view>
				</view>


				<view class="tabs">
					<view v-for="(item,index) in postTypes" :key="index">
						<view @click="changeTab(index)" class="tab"
							:class="index == postPage.visibility ? 'tab-current': '' "
							:style="{'color': index == postPage.visibility ? islandInfo.theme : 'gray'}">
							<view>{{item}}</view>
						</view>
					</view>
				</view>

				<view class="notices" v-if="notices.length > 0">
					<view class="notice" v-for="(notice,index) in notices" :style="{'margin-top' : index ? '' : '0rpx'}"
						@click="showNotice(notice)">
						<view :style="{'color': islandInfo.theme,'border' : 'solid thin ' + islandInfo.theme }"
							class="notice-icon">公告</view>
						<view class="notice-text text-line-1">{{notice.title}}</view>
					</view>
				</view>

				<view class="posts" v-for="(post,postIndex) in posts" :key="postIndex">

					<view class="post" @click="toPostDetail(post.id)">
						<view class="post-top">
							<view class="post-top-left">
								<view class="avatar">
									<image mode="aspectFill" :src="post.userInfo.avatar"></image>
								</view>
								<view class="nickname-date">
									<view class="nickname">{{post.userInfo.nickname}}</view>
									<view class="date">{{post.gmtCreate}}</view>
								</view>
							</view>
							<uni-icons @click.native.stop="toHandlePost(post.id)" type="more-filled" size="22"
								color="#c8c8c8"> </uni-icons>
						</view>
						<view class="post-content" v-html="getTextWithLine(post.content)"></view>
						<view class="media">
							<template v-if="post.pictures && post.pictures.length > 0">
								<view v-for="(picture,pictureIndex) in post.pictures" class="picture"
									@click.stop="ViewImage(post.pictures,picture)"
									:style="{'margin-right' : (pictureIndex+1)%3 == 0 ? '' :'10rpx'}">
									<image mode="aspectFill" :src="picture" />
								</view>
							</template>
							<template v-else-if="post.videoUrl">
								<video class="video" @click.stop
									:src="post.videoUrl | 'https://prod-streaming-video-msn-com.akamaized.net/0b927d99-e38a-4f51-8d1a-598fd4d6ee97/3493c85c-f35a-488f-9a8f-633e747fb141.mp4' | "
									@play="videoPlay(post.id)" @ended="videoEnd" :id="'video' + post.id"></video>
							</template>
						</view>


						<view class="post-bottom" @click="toPostDetail(post.id)">
							<view class="footer-item" v-if="post.isLike">
								<view class="footer-button" @click.stop="likeOrCancelPost(post.id,postIndex)">
									<uni-icons type="heart" size="20" :color="islandInfo.theme"></uni-icons>
								</view>
								<view class="text" :style="{'color': islandInfo.theme }">{{post.likeCount}}</view>
							</view>
							<view class="footer-item" v-else>
								<view class="footer-button" @click.stop="likeOrCancelPost(post.id,postIndex)">
									<uni-icons type="heart" size="20" color="#c3c3c3"></uni-icons>
								</view>
								<view class="text">{{post.likeCount}}</view>
							</view>
							<view class="footer-item">
								<view class="footer-button">
									<uni-icons type="chatbubble" size="22" color="#c3c3c3"></uni-icons>
								</view>
								<view class="text">{{post.commentCount}}</view>
							</view>
							<view class="footer-item" v-if="!post.isMine">
								<view class="footer-button" @click.stop="toMessageCreator(post.userInfo.id)">
									<uni-icons type="chatboxes" size="24" color="#c3c3c3"></uni-icons>
								</view>
							</view>
							<view class="footer-item">
								<view class="footer-button" @click.stop="toSharePost(post.id)">
									<uni-icons type="redo" size="20" color="#c3c3c3"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="add-button" :style="{'background-color': islandInfo.theme }">
			<uni-icons @click="toAddPost" type="plusempty" size="35" color="#FFFFFF">
			</uni-icons>
		</view>

		<uni-popup ref="noticeDetail" type="bottom">
			<view class="notice-detail">
				<view style="margin: 40rpx;max-height: 1000rpx;overflow-y: scroll;">
					<view
						style="font-size: 120%; color: #2c2c2c; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
						{{ currentNotice.title }}
					</view>
					<rich-text :nodes="currentNotice.content"
						style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #2c2c2c;">
					</rich-text>
					<view class="date">于 {{currentNotice.gmtModified}}</view>
				</view>

			</view>
		</uni-popup>




		<uni-popup ref="reportOptions" type="bottom">
			<view class="option-modal-box">
				<view class="option-buttons">
					<view class="option-button" @click="reportPost('内容涉嫌抄袭')">
						内容涉嫌抄袭
					</view>
					<view class="option-button" @click="reportPost('内容质量差')">
						内容质量差
					</view>
					<view class="option-button" @click="reportPost('广告植入')">
						广告植入
					</view>
					<view class="option-button" style="border-bottom: none;"  @click="reportPost('其他违规原因')">
						其他违规原因
					</view>
				</view>

				<view class="cancel-button" @click="closeModal">
					取消
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="shareOptions" type="bottom">
			<view class="popup">
				<view class="top">
					<view class="title">分享浪屿</view>
					<view class="close">
						<!-- <image mode="aspectFill" :src="option.cover"></image> -->
					</view>
				</view>
				<view class="options">
					<view class="option-list" style="overflow: scroll;">
						<view v-for="option in options_share" @click="islandShare(index)">
							<view class="option">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
					<view class="option-list">
						<view v-for="(option,index) in options_edit" @click="islandEdit(index)">
							<view class="option"
								v-if="index > 1 || index==0 && !islandInfo.isFixed || index==1 && islandInfo.isFixed">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="moneyInput" type="bottom">
			<view class="modal-box">
				<view class="modal-title">赞赏提示</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">赞赏任意金额</text>
						<input type="digit" v-model="order.money" placeholder="请输入您想赞赏的金额" />
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				islandInfo: {},
				currentNotice: {},

				commentAddInput: null,


				postTypes: ["自我", "关注", "时空"],
				posts: [],
				postPage: {
					pageSize: 20,
					pageNow: 1,
					visibility: 2,
					islandId: "",
					total: 0,
				},

				notices: [],


				isFocus: false,
				keyHei: 0,
				onPlayId: '', // 正在播放视频的id(post.id),进行互斥
				onPlayVideoContext: null, // 正在播放视频实例

				paddingTop: null,

				order: {},


				options_share: [{
					text: "生成长图",
					cover: "https://www.cdn.kxcdedu.top/image/default/898191511DDA4A31A670DCD340C90B1D-6-2.png"
				}, {
					text: "微信好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/FF9B3803D26D4832BBB5CF07B7555961-6-2.png"
				}, {
					text: "朋友圈",
					cover: "https://www.cdn.kxcdedu.top/image/default/C43AB7C5243F440989F25AB10F7465A5-6-2.png"
				}, {
					text: "qq好友",
					cover: "https://www.cdn.kxcdedu.top/image/default/ABB37A391BEB433FB3107B5F959B24CC-6-2.png"
				}, {
					text: "复制链接",
					cover: "https://www.cdn.kxcdedu.top/image/default/9E914679EB8B40479B43166F249A947D-6-2.png"
				}],

				options_edit: [{
					text: "设为常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/CA285DEBC1A84F47BCAEA6079C7BB463-6-2.png"
				}, {
					text: "取消常驻",
					cover: "https://www.cdn.kxcdedu.top/image/default/F5EC5A1B5A924671AE6A5E6FCDB59151-6-2.png"
				}, {
					text: "退出浪屿",
					cover: "https://www.cdn.kxcdedu.top/image/default/C8CE49E69B8144BA8588D2DFC2668302-6-2.png"
				}, {
					text: "赞助浪屿",
					cover: "https://www.cdn.kxcdedu.top/image/default/B584D91E8C7D45D3A293200F8D00FD5C-6-2.png"
				}],

			}
		},
		onReachBottom() {
			this.postPage.pageNow++
			this.$api.pagePost(this.postPage).then(res => {
				this.posts = [...this.posts, ...res.data.rows]
			})
		},
		onLoad(options) {

			this.islandInfo.id = options.islandId
			this.postPage.islandId = options.islandId
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})

			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},


		onShow() {

			if (!this.$isLogin()) {
				uni.navigateTo({
					url: "/pages_being/island/island-detail?islandId=" + this.islandInfo.id
				})
				return
			}

			this.getIslandInfo()
			this.listIslandNotice()
			this.pagePost()
		},

		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data
				})
			},
			listIslandNotice() {
				this.$api.listIslandNotice({
					islandId: this.islandInfo.id
				}).then(res => {
					this.notices = res.data
				})
			},

			pagePost() {
				this.postPage.pageNow = 1
				this.$api.pagePost(this.postPage).then(res => {
					this.postPage.total = res.data.totalPage
					this.posts = res.data.rows
				})
			},




			showNotice(notice) {
				this.currentNotice = notice
				this.$refs.noticeDetail.open('bottom')
			},



			beginAddComment(postIndex, commentIndex, isreply, isMine) {
				console.log(this.posts[postIndex].comments, this.posts[postIndex].comments[commentIndex])
				this.commentAddInput = {
					content: "",
					isreply: isreply,
					isMine: isMine,
					postIndex: postIndex,
					postId: this.posts[postIndex].id,
					commentIndex: commentIndex,
					commentId: this.posts[postIndex].comments[commentIndex] ? this.posts[postIndex].comments[
						commentIndex].id : ''
				}
			},

			islandEdit(optionIndex) {
				this.$refs.shareOptions.close("bottom")
				switch (optionIndex) {
					case 0:
						this.$api.fixIslandOrCancel({
							islandId: this.islandInfo.id
						}).then(() => {
							this.islandInfo.isFixed = true
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 1:
						this.$api.fixIslandOrCancel({
							islandId: this.islandInfo.id
						}).then(() => {
							this.islandInfo.isFixed = false
							uni.showToast({
								icon: 'success',
								title: "成功"
							})
						})
						break;
					case 2:
						uni.showToast({
							icon: 'none',
							title: "功能还未开发嘿嘿",
						})
						break;
					case 3:
						this.$refs.moneyInput.open("bottom")
						break;
				}
			},

			likeOrCancelPost(id, postIndex) {
				this.$api.likeOrCancelPost({
					id
				}).then(res => {
					if (this.posts[postIndex].isLike) {
						this.posts[postIndex].likeCount--
						this.posts[postIndex].isLike = false
					} else {
						this.posts[postIndex].likeCount++
						this.posts[postIndex].isLike = true
					}
				})
			},

			addComment() {
				if (this.commentAddInput.isreply) {
					this.$api.addReply({
						commentId: this.commentAddInput.commentId,
						content: {
							isReply: this.commentAddInput.isMine,
							content: this.commentAddInput.content
						}
					})
					if (this.posts[this.commentAddInput.postIndex].comments[this.commentAddInput.commentIndex].replies !=
						null) {
						this.posts[this.commentAddInput.postIndex].comments[this.commentAddInput.commentIndex].replies
							.push({
								isReply: this.commentAddInput.isMine,
								content: this.commentAddInput.content
							})
					} else {
						this.posts[this.commentAddInput.postIndex].comments[this.commentAddInput.commentIndex].replies = []
						this.posts[this.commentAddInput.postIndex].comments[this.commentAddInput.commentIndex].replies
							.push({
								isReply: this.commentAddInput.isMine,
								content: this.commentAddInput.content
							})
					}
					this.commentAddInput = null
				} else {
					this.$api.addComment({
						islandId: this.islandInfo.id,
						postId: this.commentAddInput.postId,
						content: this.commentAddInput.content
					}).then(res => {
						this.posts[this.commentAddInput.postIndex].comments.push(res.data)
						this.posts[this.commentAddInput.postIndex].commentCount = this.posts[this.commentAddInput
							.postIndex].commentCount + 1
						this.commentAddInput = null
					})
				}
			},

			toSharePost(id) {
				uni.showToast({
					icon: "none",
					title: "开发ing"
				})
			},

			toMessageCreator(id) {
				uni.showToast({
					icon: "none",
					title: "开发ing"
				})
			},

			islandShare() {
				uni.showToast({
					icon: "none",
					title: "开发ing"
				})
			},





			toEncourage() {
				this.$refs.moneyInput.open("bottom")
			},


			modalConfirm() {
				if (this.order.money == null || this.order.money == 0) {
					uni.showModal({
						title: "提示",
						content: "输入金额不能为零或者为空"
					})
					return
				}
				this.order.productId = this.islandInfo.id
				this.order.productType = 2

				// #ifdef H5
				if (this.isWechat()) {
					this.order.payType = "WXPAY_MP"
					this.$api.purchaseOrder(this.order).then(res => {
						WeixinJSBridge.invoke(
							"getBrandWCPayRequest", {
								appId: res.data.appId, // 应用ID（AppID）
								partnerid: "1608185528", // 商户号（PartnerID）
								prepayid: res.data.prepayId, // 预支付交易会话ID
								package: res.data.package, // 固定值
								nonceStr: res.data.nonceStr, // 随机字符串
								timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
								signType: "MD5",
								paySign: res.data.paySign, // 签名，这里用的 MD5 签名
							},
							function(res) {
								// uni.showModal({
								// 	title: "失败",
								// 	content: JSON.stringify(res)
								// })
								if (res.err_msg === "get_brand_wcpay_request:ok") {
									uni.showToast({
										title: '感谢',
										duration: 2000
									});
									that.paying = true
								} else if (res.err_msg === "get_brand_wcpay_request:fail") {
									uni.showModal({
										title: "失败",
										content: JSON.stringify(res)
									})
								}
							}
						);

						// uni.requestPayment({
						// 	appid: res.data.appId, // 应用ID（AppID）
						// 	partnerid: "1608185528", // 商户号（PartnerID）
						// 	prepayid: res.data.prepayId, // 预支付交易会话ID
						// 	package: res.data.package, // 固定值
						// 	nonceStr: res.data.nonceStr, // 随机字符串
						// 	timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						// 	signType: "MD5",
						// 	paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						// 	success(res) {
						// 		uni.showToast({
						// 			title: '感谢',
						// 			duration: 2000
						// 		});
						// 		that.paying = true
						// 	},
						// 	fail(err) {
						// 		uni.showModal({
						// 			title: "失败",
						// 			content: JSON.stringify(err)
						// 		})
						// 		console.log('fail:' + JSON.stringify(err));
						// 		console.log("支付失败");
						// 	}
						// })
					})
				}
				// #endif

				// #ifdef APP
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_APP"
				}).then(res => {
					console.log(res.data.data)
					let orderInfo = {
						"appid": res.data.data.appId, // 应用ID（AppID）
						"partnerid": "1608185528", // 商户号（PartnerID）
						"prepayid": res.data.data.prepayId, // 预支付交易会话ID
						"package": res.data.data.package, // 固定值
						"noncestr": res.data.data.nonceStr, // 随机字符串
						"timestamp": res.data.data.timeStamp, // 时间戳（单位：秒）
						"sign": res.data.data.paySign, // 签名，这里用的 MD5 签名
					}

					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				// #endif

				// #ifdef MP-WEIXIN
				this.order.payType = "WXPAY_MINI"

				this.$api.purchaseOrder(this.order).then(res => {
					let orderInfo = {
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						sign: res.data.paySign, // 签名，这里用的 MD5 签名
					}

					uni.requestPayment({
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: "MD5",
						paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						success(res) {
							uni.showToast({
								title: '感谢',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})


				// #endif





				this.$refs.moneyInput.close("bottom")
			},
			modalCancel() {
				this.$refs.moneyInput.close("bottom")
			},


			ViewImage(pictures, url) {
				console.log("触发", pictures, url)
				uni.previewImage({
					urls: pictures,
					current: url
				});
			},
			changeTab(index) {
				this.postPage.visibility = index
				this.pagePost()
			},




			toHandlePost(id) {
				this.handlePostId = id
				this.$refs.reportOptions.open('bottom')
			},
			reportPost(reportReason) {
				this.$api.report({
					reportReason: reportReason,
					type: 4,
					linkId: this.handlePostId,
					sourceId: this.islandInfo.id
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '已举报'
					})
					this.closeModal()
				})
			},
			closeModal() {
				this.handlePostId = ""
				this.$refs.reportOptions.close('bottom')
			},



			toBackPage() {
				uni.switchTab({
					url: "/pages/island/island"
				})
			},
			toIslandIntro() {
				uni.navigateTo({
					url: "/pages_being/island/island-intro?islandId=" + this.islandInfo.id
				})
			},
			toPostDetail(postId) {
				uni.navigateTo({
					url: "/pages_being/island/post-detail?islandId=" + this.islandInfo.id + "&postId=" +
						postId
				})
			},
			toAddPost() {
				uni.navigateTo({
					url: "/pages_being/island/post-create?islandId=" + this.islandInfo.id
				})
			},
			toShareIsland() {
				this.$refs.shareOptions.open('bottom')
			},
			toSearchIslandPost() {
				uni.showToast({
					icon: 'none',
					title: "开发ing"
				})
			},
			onShareAppMessage: function(e) {
				return {
					title: "邀请您加入" + this.islandInfo.name + "浪屿",
					path: '/pages_being/island/post-island-detail?islandId=' + this.islandInfo.id,
					imageUrl: this.islandInfo.background
				}
			},





			videoPlay(id) {
				if (this.onPlayId === id) {
					return
				}
				// 初始播放
				if (this.onPlayId === '') {
					this.onPlayId = id
					this.onPlayVideoContext = uni.createVideoContext('video' + id) //创建视频实例指向video
					return
				}
				// 互斥播放
				this.onPlayVideoContext.pause()
				this.onPlayVideoContext = uni.createVideoContext('video' + id)
				this.onPlayId = id
			},
			videoEnd() {
				this.onPlayId = ''
				this.onPlayVideoContext = null
			},






			//判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			},
			getTextWithLine(text) {
				if (text) {
					return text.split("\n").join("<br>");
				}
			},
			hexToRgba(hex, opacity) {
				if (hex) {
					return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
						parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"
				}
			},
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.post-island-detail {

		/deep/::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}


		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 850rpx;

			background-repeat: no-repeat;
			background-size: cover;

			// .mask {
			// 	height: 100%;
			// 	width: 100%;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0rpx;
			// 	background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
			// 	z-index: 2;
			// }
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			.back-arrow {
				width: 100%;
				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif

				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.avatar-list-stacked .avatar {
				box-shadow: 0 0 0 1px #fff;
			}

			.avatar-list-stacked .avatar {
				margin-right: -20rpx !important;
			}

			.avatar {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				display: inline-block;
				background: #d1d1d1 no-repeat center/cover;
				position: relative;
				text-align: center;
				color: #fff;
				font-weight: 600;
				vertical-align: bottom;
				font-size: .875rem;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border-radius: 50%;
			}


			.info-top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 80rpx;

				.cover {
					width: 280rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}

				.info-top-right {
					width: 370rpx;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;


					.name {
						font-size: 36rpx;
						font-weight: bold;
					}

					.description {
						font-size: 30rpx;
					}
				}

			}

			.island-status {
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 200rpx;
					height: 100rpx;

					.item-top {
						font-size: 36rpx;
					}

					.item-bottom {
						font-size: 28rpx;
					}
				}

				.split-line {
					width: 5rpx;
					height: 60rpx;
				}

			}



			.main-content {
				width: 100%;
				background-color: #f9f9f9;
				border-radius: 30rpx;
				margin-top: 40rpx;
				padding-bottom: 140rpx;


				.activities {

					display: flex;
					flex-direction: row;

					overflow-x: scroll;



					width: 710rpx;
					margin-bottom: 30rpx;
					margin-left: 30rpx;
					margin-top: 40rpx;

					.activity {
						flex-shrink: 0;
						width: 460rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;

						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.activity-top {
							width: 460rpx;
							height: 80rpx;
							border-radius: 20rpx 20rpx 0 0;



							.activity-title {
								margin: 0 20rpx;
								height: 80rpx;
								line-height: 80rpx;
								// font-weight: bold;
							}

						}

						.activity-bottom {
							margin: 20rpx;
							line-height: 50rpx;
							font-size: 28rpx;
						}



					}
				}

				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 30rpx;
					margin-bottom: 30rpx;

					.tab {
						margin-left: 30rpx;
						color: gray;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						padding: 3rpx 20rpx;

						background-color: #FFFFFF;
						border-radius: 15rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						font-weight: bold;
					}

				}

				.notices {
					width: 650rpx;
					margin-left: 30rpx;
					padding: 30rpx 20rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;

					.notice {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 30rpx;

						.notice-icon {
							font-size: 24rpx;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
						}

						.notice-text {
							width: 560rpx;


						}

					}

				}

				.posts {
					.post {
						width: 630rpx;
						padding: 30rpx;
						background-color: #FFFFFF;
						border-radius: 20rpx;
						// box-shadow: 0 0 2rpx 4rpx #f4f4f4;
						margin-left: 30rpx;
						margin-top: 30rpx;

						.post-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;

							margin-bottom: 20rpx;

							.post-top-left {
								display: flex;
								flex-direction: row;
								align-items: center;

								.avatar {
									width: 80rpx;
									height: 80rpx;
									border-radius: 50%;
									overflow: hidden;
								}

								.nickname-date {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									margin-left: 20rpx;
									height: 80rpx;

									.nickname {
										font-size: 32rpx;
									}

									.date {
										font-size: 24rpx;
										color: #c3c3c3;
									}
								}
							}
						}

						.post-content {
							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 5;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

						.media {
							display: flex;
							flex-direction: row;
							margin-top: 20rpx;

							width: 100%;
							flex-wrap: wrap;

							.picture {
								width: 200rpx;
								height: 200rpx;
								border-radius: 10rpx;
								overflow: hidden;
							}

							.video {
								width: 100%;
								height: 320rpx;
								border-radius: 10rpx;
							}
						}

						.post-bottom {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;


							.footer-item {
								margin-top: 20rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.text {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #c3c3c3;
								}

								.footer-button {
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
								}
							}

						}

					}

					.post-comments {
						display: flex;
						flex-direction: column;


						.post-comment {
							width: 650rpx;
							padding: 20rpx;
							background-color: #FFFFFF;
							border-radius: 20rpx;
							margin-left: 30rpx;
							margin-top: 20rpx;

							.post-comment-top {
								width: 610rpx;
								display: flex;
								flex-direction: row;
								justify-content: flex-end;
								align-items: flex-start;

								.post-comment-top-text {
									margin-right: 20rpx;
									width: 540rpx;
									line-height: 50rpx;

									display: flex;
									flex-direction: row;
									justify-content: flex-end;
									align-items: center;

								}

							}

							.comment-top {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: flex-start;

								margin-bottom: 20rpx;

								.avatar {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									overflow: hidden;
								}

								.nickname-date {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									margin-left: 20rpx;

									.nickname {
										font-size: 28rpx;
									}

									.date {
										font-size: 24rpx;
										color: gray;
									}

								}
							}

							.post-comment-reply {
								margin-top: 20rpx;
								width: 610rpx;
								display: flex;
								flex-direction: row;
								align-items: flex-start;

								.post-comment-reply-text {
									margin-right: 20rpx;
									width: 600rpx;
									line-height: 50rpx;

									display: flex;
									flex-direction: row;
									align-items: center;

									border-radius: 10rpx;
									overflow: hidden;

								}
							}

						}

						.comment-bottom {
							margin-right: 40rpx;
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							align-items: center;


							.footer-item {
								margin-top: 20rpx;
								margin-left: 40rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.text {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #E18427;
								}

								.footer-button {
									padding: 0 15rpx;
									height: 60rpx;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									background-color: #FFFFFF;
									box-shadow: 0 0 2rpx 4rpx #f4f4f4;
									border-radius: 50rpx;
									color: white;
								}
							}

						}

					}
				}
			}
		}

		.comment-input {
			width: 100%;
			background-color: #ffffff;

			position: fixed;
			z-index: 12;
			bottom: 0;


			display: flex;
			flex-direction: row;
			align-items: flex-end;


			padding: 30rpx 10rpx;
			border-top: 1px solid #d5d5d5;

			.check-open {
				width: 80rpx;
				height: 80rpx;
			}

			.content {
				margin-right: 30rpx;
				border: 1rpx solid #d5d5d5;
				border-radius: 10rpx;
				width: 600rpx;
				padding: 20rpx;
				height: 40rpx;


				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

		.popup {
			padding: 40rpx 30rpx 60rpx 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
			min-height: 200rpx;

			.top {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.title {
					font-weight: bold;
				}

				.close {}
			}

			.options {
				display: flex;
				flex-direction: column;
				margin-top: 10rpx;

				.option-list {
					display: flex;
					flex-direction: row;
					margin-top: 30rpx;

					.option {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						margin-right: 30rpx;

						.img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}

						.text {
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.notice-detail {
			width: 690rpx;

			margin-left: 30rpx;
			margin-bottom: 200rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;

			text-align: left;

			.date {
				color: #00000059;
				font-size: 28rpx;
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
			}
		}


		.option-modal-box {
			width: 690rpx;
			margin-left: 30rpx;
			margin-bottom: 30rpx;

			.option-buttons {
				width: 690rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.option-button {
					width: 650rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 20rpx;
					border-bottom: solid thin #f4f4f4;
				}
			}

			.cancel-button {
				width: 690rpx;
				height: 100rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				text-align: center;
				line-height: 100rpx;
				color: #c3c3c3;
			}
		}

		.add-button {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;

			position: fixed;
			z-index: 4;
			bottom: 150rpx;
			right: 60rpx;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

		}
	}

	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 600rpx;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		text-align: left;


		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}

		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;


			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;

				.modal-key {
					display: block;

					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

			}

			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;

				line-height: 60rpx;
			}

		}

		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;

			text-align: center;
		}

		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;

			width: 40%;
		}

	}
</style>
